<script src="/assets/js/vue.global3.5.13.js"></script>
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-name" class="form-control" name="row[name]" type="text" value="{$row.name|htmlentities}">
        </div>
    </div>
    <div class="form-group" id="attrs">
        <label class="control-label col-xs-12 col-sm-2">属性:</label>
        <div class="col-xs-12 col-sm-8">
            <table class="table table-bordered">
                <tr>
                    <th>属性名</th>
                    <th>属性价格</th>
                    <th>库存型属性</th>
                    <th>操作</th>
                </tr>
                <template v-for="(item, index) in attrs">
                    <tr>
                        <td>
                            <input class="form-control" :name="'row[attrs]['+index+'][name]'" type="text" v-model="item.name"></input>
                        </td>
                        <td>
                            <input class="form-control" :name="'row[attrs]['+index+'][price]'" type="text" v-model="item.price"></input>
                        </td>
                        <td>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <template v-if="item.is_stock==1">
                                        <input type="checkbox"  @change="ChangeIsStock($event,index)" checked="checked"></input>
                                    </template>
                                    <template v-if="item.is_stock==0">
                                        <input type="checkbox"  @change="ChangeIsStock($event,index)" ></input>
                                    </template>

                                    <input type="hidden" :name="'row[attrs]['+index+'][is_stock]'" :value="attrs[index].is_stock"></input>
                                </span>
                                <input type="number" class="form-control" :name="'row[attrs]['+index+'][stock]'" v-model="item.stock"></input>
                            </div>
                        </td>
                        <td>
                            <template v-if="index>0">
                                <button type="button" class="btn btn-danger" @click="removeSpecification($event,index)">删除</button>
                            </template>

                        </td>
                    </tr>
                </template>

            </table>
            <button type="button" class="btn btn-default" @click="addSpecification($event)">添加</button>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-primary btn-embossed disabled">{:__('OK')}</button>
        </div>
    </div>
</form>
<script>
    const { createApp, ref } = Vue

    createApp({
        setup() {
            const attr={
                name:"",
                price:"",
                is_stock:0,
                stock:0
            }

            const attrs = ref(<?php echo json_encode($attrs);?>);
            window.attrs=attrs;

            const addSpecification=(event)=>{
                attrs.value.push(Object.assign({}, attr));
                event.stopPropagation();
            }
            const removeSpecification=(event,index)=>{
                attrs.value.splice(index,1);
                event.stopPropagation();
            }
            const ChangeIsStock=(event,index)=>{
                console.log("event",event);
                console.log("event.target.checked",event.target.checked);
                console.log("index",index);
                //
                attrs.value[index].is_stock=(event.target.checked?1:0);
            }
            return {
                attrs,
                ChangeIsStock,
                addSpecification,
                removeSpecification
            }
        }
    }).mount('#attrs')
</script>
